<template>
  <dialogBase v-if="show" :title="title" @ok="submit" @close="close">
    <form class="modifyQue">
      <div class="form-item">
        <label class="require" for="que-name">试题名称:</label>
        <textarea
          id="que-name"
          v-model="outData.name"
          type="text"
          :placeholder="placeholder"></textarea>
        <div class="error_text textarea">
          {{ hasError__name }}
        </div>
      </div>
      <div class="form-item">
        <label for="que-desc">试题描述:</label>
        <textarea
          id="que-desc"
          v-model="outData.desc"
          type="text"
          placeholder="例如：这道题考察了受试者对于积分中值定理的掌握情况…"></textarea>
      </div>
      <div class="form-item double">
        <div class="box">
        <label class="require">试题类型:</label>
          <Select
            width="135px"
            v-model="queType"
            placeholder="试题类型">
            <Option
              v-for="t of [0,1,2]"
              :key="t"
              :value="t">
                {{ getType(t) }}
            </Option>
          </Select>
        </div>
        <div class="box" style="margin-left:15px">
          <label class="require">题目难度:</label>
          <Select
            width="135px"
            v-model="difficulty"
            placeholder="题目难度">
            <Option
              v-for="t of [0,1,2,3,4]"
              :key="t"
              :value="t">
                {{ getDifficulty(t) }}
            </Option>
          </Select>
        </div>
      </div>
      <div class="form-item checkbox-container" v-if="queType === 2">
        <p
          class="checkbox"
          @click="switchChosen(0)"
          :class="{ chosen: queAns === 0 }">正确</p>
        <p
          class="checkbox"
          @click="switchChosen(1)"
          :class="{ chosen: queAns === 1 }">错误</p>
      </div>
      <div class="form-item double" v-if="queType !== 2">
        <label class="require">正确答案:</label>
        <Select
          :multiple="queType === 1"
          width="210px"
          v-model="queAns"
          placeholder="正确答案">
          <Option
            v-for="t of ['A','B','C','D']"
            :key="t"
            :value="t">
              {{ t }}
          </Option>
        </Select>
        <div class="error_text">
          {{ hasError__queAns }}
        </div>
      </div>
      <template v-if="queType !== 2">
        <div class="form-item">
          <label class="require" for="que-A">候选项 A:</label>
          <textarea
            id="que-A"
            v-model="outData.options.A"
            type="text"
          ></textarea>
          <div class="error_text textarea">
            {{ hasError__A }}
          </div>
        </div>
        <div class="form-item">
          <label class="require" for="que-B">候选项 B:</label>
          <textarea
            id="que-B"
            v-model="outData.options.B"
            type="text"
          ></textarea>
          <div class="error_text textarea">
            {{ hasError__B }}
          </div>
        </div>
        <div class="form-item">
          <label class="require" for="que-C">候选项 C:</label>
          <textarea
            id="que-C"
            v-model="outData.options.C"
            type="text"
          ></textarea>
          <div class="error_text textarea">
            {{ hasError__C }}
          </div>
        </div>
        <div class="form-item">
          <label class="require" for="que-D">候选项 D:</label>
          <textarea
            id="que-D"
            v-model="outData.options.D"
            type="text"
          ></textarea>
          <div class="error_text textarea">
            {{ hasError__D }}
          </div>
        </div>
      </template>
    </form>
  </dialogBase>
</template>

<script>
import dialogBase from '@/components/Dialogs/base/dialogBase';
import Select from '@/components/select/Select';
import Option from '@/components/select/Option';

export default{
  props: ['dialogData', 'show', 'title'],
  data() {
    return {
      outData: {
        name: '',
        desc: '',
        id: '',
        options: {
          A: '',
          B: '',
          C: '',
          D: '',
        },
      },
      hasError__name: '',
      hasError__queAns: '',
      hasError__A: '',
      hasError__B: '',
      hasError__C: '',
      hasError__D: '',
      queType: 0,
      difficulty: 0,
      queAns: '',
      placeholder: '例如：假设f(x)在[a,b]上连续，以下结论是否正确\n∃ε∈[a,b]，使∫(a,b)f(x)dx = f(ε)(b-a)',
    };
  },
  watch: {
    dialogData: {
      handler(val) {
        this.resetData(val);
      },
      deep: true,
    },
  },
  methods: {
    getStrLen(str) {
      // return str.replace(/[\u0391-\uFFE5]/g, 'xx').length;
      return str.length;
    },
    resetData(obj) {
      this.$data.outData = obj || this.outData;
      this.$data.outData.name = this.dialogData.name;
      this.$data.outData.desc = this.dialogData.desc;
      this.$data.outData.id = this.dialogData.id;
      this.$data.difficulty = this.dialogData.difficulty || 0;
      this.$data.queType = this.dialogData.queType || 0;
      this.$data.queAns = this.dialogData.queAns;
      this.$data.outData.options = this.dialogData.options;
    },
    close() {
      this.$emit('close', false);
    },
    submit() {
      let flag = true;
      if (!this.outData.name) {
        this.hasError__name = '请填写题目名称';
        flag = false;
      } else {
        this.hasError__name = '';
      }
      if (this.queAns.length < 2) {
        if (this.queType === 0 && this.queAns.length === 0) {
          this.hasError__queAns = '请选择正确答案';
          flag = false;
        } else if (this.queType === 1) {
          this.hasError__queAns = '请选择至少两个答案';
          flag = false;
        }
      } else {
        this.hasError__queAns = '';
      }
      if (!this.outData.options.A && this.queType !== 2) {
        this.hasError__A = '请填写选项A';
        flag = false;
      } else {
        this.hasError__A = '';
      }
      if (!this.outData.options.B && this.queType !== 2) {
        this.hasError__B = '请填写选项B';
        flag = false;
      } else {
        this.hasError__B = '';
      }
      if (!this.outData.options.C && this.queType !== 2) {
        this.hasError__C = '请填写选项C';
        flag = false;
      } else {
        this.hasError__C = '';
      }
      if (!this.outData.options.D && this.queType !== 2) {
        this.hasError__D = '请填写选项D';
        flag = false;
      } else {
        this.hasError__D = '';
      }
      if (!flag) return;
      this.$emit('done', {
        ...this.outData,
        type: this.queType,
        ans: this.queAns.toString(),
        difficulty: this.difficulty,
      });
    },
    switchChosen(ans) {
      this.queAns = ans;
    },
    getType(type) {
      switch (type) {
        case 0:
          return '单选题';
        case 1:
          return '多选题';
        case 2:
          return '判断题';
        default:
          return null;
      }
    },
    getDifficulty(type) {
      switch (type) {
        case 0:
          return '非常简单';
        case 1:
          return '较简单';
        case 2:
          return '普通';
        case 3:
          return '困难';
        case 4:
          return '极其困难';
        default:
          return null;
      }
    },
  },
  components: {
    dialogBase,
    Select,
    Option,
  },
};
</script>
<style lang="less">
  .modifyQue{
    .form-item {
      position: relative;
      margin: 20px 10px;
      flex-wrap: wrap;
      &.double {
        display: flex;
        justify-content: flex-start;
        padding-left: 62px;
        .box {
          font-size: 0;
        }
      }
      &.checkbox-container {
        padding-left: 132px;
        justify-content: flex-start;
        .checkbox {
          height: 30px;
          width: 173px;
          margin: 0 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #DBDBDB;
          cursor: pointer;
          user-select: none;

          &.chosen {
            color: rgb(23, 116, 223);
            border-color: rgb(78, 138, 207);
            box-shadow: 0 0 2px rgb(78, 138, 207);
          }
        }
      }
      textarea {
        width: 360px;
        height: 70px;
        border-color: #DBDBDB;
      }
      .select-box {
        margin: 0;
      }
      .error_text {
        position: absolute;
        top: 29px;
        left: 136px;
        user-select: none;
        width: 300px;
        margin-right:6px;
        text-align:left;
        color:red;
        font-size: 12px;
        &.textarea {
          top: 69px;
        }
      }
    }
  }
</style>
